<template>
  <div id="app">
    <!-- FullPage.js 全屏滚动容器 -->
    <full-page ref="fullpageRef" :options="options" id="fullpage">
      
      <!-- 第一页：欢迎页面 -->
      <div class="section" data-anchor="home">
        <div class="page-container">
          <div class="content">
            <!-- 主标题 - 淡入动画 -->
            <div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
              <h1 class="main-title">欢迎来到我们的世界</h1>
            </div>
            <!-- 副标题 - 延迟淡入动画 -->
            <div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
              <p class="subtitle">创新 • 专业 • 卓越</p>
            </div>
            <!-- 行动按钮 - 缩放进入动画 -->
            <div data-aos="zoom-in" data-aos-duration="800" data-aos-delay="600">
              <button class="cta-button" @click="scrollToNext">开始探索</button>
            </div>
            <!-- 装饰性浮动元素 -->
            <div class="floating-elements">
              <!-- 浮动圆形 - 从左侧滑入 -->
              <div class="floating-circle" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="800"></div>
              <!-- 浮动正方形 - 从右侧滑入 -->
              <div class="floating-square" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1000"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二页：关于我们 -->
      <div class="section" data-anchor="about">
        <div class="page-container">
          <div class="content">
            <!-- 页面标题 - 从上滑下动画 -->
            <div data-aos="slide-down" data-aos-duration="1000">
              <h2 class="section-title">关于我们的产品</h2>
            </div>
            <!-- 特性卡片网格 -->
            <div class="about-grid">
              <!-- 创新技术卡片 - 左翻转动画 -->
              <div class="about-card" data-aos="flip-left" data-aos-duration="800" data-aos-delay="200">
                <div class="card-icon">🚀</div>
                <h3>创新技术</h3>
                <p>采用最前沿的技术栈，为用户提供卓越的体验</p>
              </div>
              <!-- 优质服务卡片 - 上翻转动画 -->
              <div class="about-card" data-aos="flip-up" data-aos-duration="800" data-aos-delay="400">
                <div class="card-icon">⭐</div>
                <h3>优质服务</h3>
                <p>7x24小时专业服务，确保您的需求得到及时响应</p>
              </div>
              <!-- 精准定位卡片 - 右翻转动画 -->
              <div class="about-card" data-aos="flip-right" data-aos-duration="800" data-aos-delay="600">
                <div class="card-icon">🎯</div>
                <h3>精准定位</h3>
                <p>深入了解客户需求，提供量身定制的解决方案</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第三页：服务项目 -->
      <div class="section" data-anchor="services">
        <div class="page-container">
          <div class="content">
            <!-- 页面标题 - 缩放淡出动画 -->
            <div data-aos="zoom-out" data-aos-duration="1000">
              <h2 class="section-title">我们的服务</h2>
            </div>
            <!-- 服务项目列表容器 -->
            <div class="services-container">
              <!-- 服务项目1 - Web开发 -->
              <div class="service-item" data-aos="slide-right" data-aos-duration="800" data-aos-delay="200">
                <div class="service-number">01</div>
                <div class="service-content">
                  <h3>Web 开发</h3>
                  <p>响应式网站设计与开发，现代化前端技术栈</p>
                </div>
              </div>
              <!-- 服务项目2 - 移动应用 -->
              <div class="service-item" data-aos="slide-left" data-aos-duration="800" data-aos-delay="400">
                <div class="service-number">02</div>
                <div class="service-content">
                  <h3>移动应用</h3>
                  <p>iOS/Android 原生应用开发，跨平台解决方案</p>
                </div>
              </div>
              <!-- 服务项目3 - UI/UX设计 -->
              <div class="service-item" data-aos="slide-right" data-aos-duration="800" data-aos-delay="600">
                <div class="service-number">03</div>
                <div class="service-content">
                  <h3>UI/UX 设计</h3>
                  <p>用户体验设计，界面设计，品牌视觉设计</p>
                </div>
              </div>
              <!-- 服务项目4 - 技术咨询 -->
              <div class="service-item" data-aos="slide-left" data-aos-duration="800" data-aos-delay="800">
                <div class="service-number">04</div>
                <div class="service-content">
                  <h3>技术咨询</h3>
                  <p>架构设计，技术选型，性能优化咨询服务</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第四页：联系方式 -->
      <div class="section" data-anchor="contact">
        <div class="page-container">
          <div class="content">
            <!-- 页面标题 - 从上淡入动画 -->
            <div data-aos="fade-down" data-aos-duration="1000">
              <h2 class="section-title">联系我们</h2>
            </div>
            <!-- 联系信息网格 -->
            <div class="contact-info">
              <!-- 邮箱信息 - 弹跳进入动画 -->
              <div class="contact-item" data-aos="bounce-up" data-aos-duration="800" data-aos-delay="200">
                <div class="contact-icon">📧</div>
                <div class="contact-text">
                  <h4>邮箱</h4>
                  <p>contact@example.com</p>
                </div>
              </div>
              <!-- 电话信息 - 弹跳进入动画 -->
              <div class="contact-item" data-aos="bounce-up" data-aos-duration="800" data-aos-delay="400">
                <div class="contact-icon">📞</div>
                <div class="contact-text">
                  <h4>电话</h4>
                  <p>+86 188-8888-8888</p>
                </div>
              </div>
              <!-- 地址信息 - 弹跳进入动画 -->
              <div class="contact-item" data-aos="bounce-up" data-aos-duration="800" data-aos-delay="600">
                <div class="contact-icon">📍</div>
                <div class="contact-text">
                  <h4>地址</h4>
                  <p>北京市朝阳区xx街道xx号</p>
                </div>
              </div>
            </div>
            <!-- 社交媒体链接 -->
            <div class="social-links" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
              <!-- 社交链接 - 依次缩放进入 -->
              <a href="#" class="social-link" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="1000">微信</a>
              <a href="#" class="social-link" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="1100">微博</a>
              <a href="#" class="social-link" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="1200">QQ</a>
            </div>
          </div>
        </div>
      </div>
    </full-page>
    
    <!-- 顶部固定导航栏 -->
    <div class="scroll-down-indicator">
      <div class="display-barcode">
        <!-- Logo 区域 -->
        <div class="logo">
          <img src="./assets/P-10310290-10286384.jpg" alt="Logo" />
        </div>
        
        <!-- 桌面端水平导航菜单 -->
        <div class="menu desktop-menu">
          <div class="menu-item" v-for="item in menu" :key="item.anchor" @click="moveTo(item.anchor)">
            {{ item.name }}
          </div>
        </div>

        <!-- 移动端汉堡菜单按钮 -->
        <div class="hamburger-menu" @click="toggleMobileMenu" :class="{ active: isMobileMenuOpen }">
          <!-- 汉堡菜单的三条横线 -->
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <!-- 移动端下拉菜单面板 -->
      <div class="mobile-menu" :class="{ open: isMobileMenuOpen }">
        <div class="mobile-menu-item" v-for="item in menu" :key="item.anchor" @click="handleMobileMenuClick(item.anchor)">
          {{ item.name }}
        </div>
      </div>
    </div>
    
    <!-- 页面指示器（已注释掉） -->
    <!-- <div class="page-indicator">
      <span class="current-page">{{ currentPageIndex }}</span>
      <span class="separator">/</span>
      <span class="total-pages">{{ totalPages }}</span>
    </div> -->
  </div>
</template>

<script setup>
// Vue 3 Composition API 导入
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
// AOS 动画库导入
import AOS from 'aos'
import 'aos/dist/aos.css'

// ========== 响应式数据定义 ==========
const fullpageRef = ref(null) // FullPage.js 实例引用，用于调用API
const currentPageIndex = ref(1) // 当前页面索引（1-4）
const totalPages = ref(4) // 总页面数
const selectedService = ref(null) // 选中的服务项目（预留功能）
const activeSection = ref(0) // 当前激活的页面索引（0-3）
const isMobileMenuOpen = ref(false) // 移动端菜单开关状态

// 导航菜单配置数据
const menu = reactive([
  { name: '首页', anchor: 'home' },
  { name: '关于产品', anchor: 'about' },
  { name: '服务', anchor: 'services' },
  { name: '联系我们', anchor: 'contact' }
])

// ========== FullPage.js 配置选项 ==========
const options = {
  // 基本配置
  css3: true, // 使用 CSS3 过渡效果，提升性能
  scrollingSpeed: 800, // 页面切换滚动速度（毫秒）
  easing: 'easeInOutCubic', // 缓动函数，提供平滑的过渡效果

  // 导航设置
  navigation: false, // 禁用右侧圆点导航
  navigationPosition: 'right', // 导航位置（如果启用）
  navigationTooltips: ['首页', '关于', '服务', '联系'], // 导航提示文字

  // 锚点配置 - 用于URL路由和页面跳转
  anchors: ['home', 'about', 'services', 'contact'],

  // 自适应配置
  fitToSection: true, // 自动调整到完整的section
  fitToSectionDelay: 1000, // 自动调整延迟时间

  // 移除版权信息
  credits: {
    enabled: false
  },

  // ========== 页面切换回调函数 ==========
  // 页面加载完成后的回调
  afterLoad: (origin, destination, direction) => {
    // 更新当前页面信息
    currentPageIndex.value = destination.index + 1
    activeSection.value = destination.index

    // 手动触发当前页面的AOS动画
    setTimeout(() => {
      const currentSection = document.querySelector(`[data-anchor="${destination.anchor}"]`)
      if (currentSection) {
        // 获取当前页面所有带AOS属性的元素
        const aosElements = currentSection.querySelectorAll('[data-aos]')
        // 为每个元素添加动画类，触发动画
        aosElements.forEach(el => {
          el.classList.add('aos-animate')
        })
      }
      
      // 调试日志
      console.log('页面动画触发:', {
        from: origin?.index,
        to: destination.index,
        direction: direction
      })
    }, 200) // 延迟200ms确保页面切换完成
  },

  // 离开页面时的回调
  onLeave: (origin, destination, direction) => {
    // 重置当前页面的激活状态
    activeSection.value = -1
    
    // 立即重置离开页面的AOS动画状态
    const currentSection = document.querySelector(`[data-anchor="${origin.anchor}"]`)
    if (currentSection) {
      // 移除动画类，重置动画状态
      const aosElements = currentSection.querySelectorAll('[data-aos]')
      aosElements.forEach(el => {
        el.classList.remove('aos-animate')
      })
    }

    // 调试日志
    console.log('离开页面:', {
      from: origin.index,
      to: destination.index,
      direction: direction
    })
  }
}

// ========== 方法定义 ==========
/**
 * 跳转到指定页面
 * @param {string} section - 目标页面的锚点名称
 */
const moveTo = (section) => {
  if (fullpageRef.value?.api) {
    fullpageRef.value.api.moveTo(section)
  }
}

/**
 * 滚动到下一页
 */
const scrollToNext = () => {
  if (fullpageRef.value?.api) {
    fullpageRef.value.api.moveSectionDown()
  }
}

// ========== 移动端菜单相关方法 ==========
/**
 * 切换移动端菜单显示/隐藏状态
 */
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

/**
 * 处理移动端菜单项点击事件
 * @param {string} anchor - 目标页面锚点
 */
const handleMobileMenuClick = (anchor) => {
  moveTo(anchor) // 跳转到目标页面
  isMobileMenuOpen.value = false // 关闭菜单
}

// ========== 组件生命周期 ==========
onMounted(() => {
  // 初始化 AOS 动画库 - 禁用自动检测，改为手动控制
  AOS.init({
    duration: 1000, // 默认动画持续时间
    easing: 'ease-in-out-sine', // 缓动函数
    once: false, // 允许重复播放动画
    mirror: false, // 禁用镜像效果
    disable: false, // 不禁用动画
    startEvent: 'load', // 启动事件
    useClassNames: false, // 不使用自定义类名
    disableMutationObserver: true, // 禁用自动DOM观察，防止与FullPage.js冲突
    throttleDelay: 99, // 节流延迟
    debounceDelay: 50 // 防抖延迟
  })

  // 确保DOM渲染完成后执行
  nextTick(() => {
    console.log('FullPage.js 初始化完成')
    
    // 手动触发第一页动画
    setTimeout(() => {
      activeSection.value = 0
      const firstSection = document.querySelector('[data-anchor="home"]')
      if (firstSection) {
        const aosElements = firstSection.querySelectorAll('[data-aos]')
        aosElements.forEach(el => {
          el.classList.add('aos-animate')
        })
      }
    }, 500) // 延迟500ms确保所有初始化完成
  })
})
</script>

<style scoped lang="scss">
// ========== 全局重置和基础样式 ==========
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; // 使用border-box模型，方便计算尺寸
}

// 图片基础样式
img {
  width: 100%;
  height: 100%;
  object-fit: cover; // 保持比例裁剪图片
}

// 页面基础样式
html,
body {
  font-family: 'Arial', 'Helvetica', sans-serif;
  height: 100%;
  width: 100%;
  overflow: hidden; // 隐藏滚动条，由FullPage.js控制滚动
}

#app {
  height: 100vh; // 视口高度
  width: 100vw; // 视口宽度
}

// ========== FullPage.js 页面样式 ==========
/* 确保每个页面都是 100% 宽高 */
.section {
  position: relative;
  width: 100% !important; // 强制100%宽度
  height: 100vh !important; // 强制视口高度
  min-height: 100vh;
  display: flex;
  align-items: center; // 垂直居中
  justify-content: center; // 水平居中
  overflow: hidden; // 隐藏溢出内容
}

/* 页面容器 - 确保内容居中且响应式 */
.page-container {
  width: 100%;
  max-width: 1200px; // 最大宽度限制
  padding: 0 20px; // 左右内边距
  
  /* 平板设备适配 */
  @media (max-width: 768px) {
    max-width: 100%;
    padding: 0 16px;
  }
  
  /* 手机设备适配 */
  @media (max-width: 480px) {
    padding: 0 12px;
  }
}

/* 内容区域 */
.content {
  width: 100%;
  text-align: center; // 文本居中对齐
  
  /* 超大屏幕适配 */
  @media (min-width: 1920px) {
    max-width: 1400px;
    margin: 0 auto;
  }
}

// ========== 页面背景渐变样式 ==========
/* 为每个页面设置不同的背景渐变 */
.section:nth-child(1) {
  background: linear-gradient(135deg, #e7e8ea 0%, #d8d7d7 100%); // 灰色渐变
  // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.section:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); // 粉色渐变
}

.section:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); // 蓝色渐变
}

.section:nth-child(4) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); // 绿色渐变
}

// ========== 隐藏FullPage.js版权信息 ==========
/* 隐藏 fullPage.js 版权信息 */
:global(.fp-watermark) {
  display: none !important;
}

:global(.fp-enabled body .fp-watermark) {
  display: none !important;
}

:global([data-fp-watermark]) {
  display: none !important;
}

// ========== 顶部导航栏样式 ==========
/* 顶部固定导航栏 */
.scroll-down-indicator {
  position: fixed; // 固定定位
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; // 导航栏高度
  background: rgba(0, 0, 0, 0.3); // 半透明黑色背景
  backdrop-filter: blur(10px); // 背景模糊效果
  z-index: 1000; // 确保在最顶层

  // 导航栏内容容器
  .display-barcode {
    display: flex;
    align-items: center;
    justify-content: space-between; // 左右分布
    height: 100%;
    padding: 0 20px;

    // Logo样式
    .logo {
      width: 50px;
      height: 40px;
      
      img {
        border-radius: 8px; // 圆角
        object-fit: contain; // 保持比例适应容器
      }
    }

    // 桌面端菜单样式
    .desktop-menu {
      display: flex;
      gap: 24px; // 菜单项间距

      .menu-item {
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease; // 过渡动画
        padding: 8px 16px;
        border-radius: 20px; // 圆角背景
        text-decoration: none;

        // 悬停效果
        &:hover {
          color: #ffd700; // 金色文字
          background: rgba(255, 255, 255, 0.1); // 半透明白色背景
          transform: translateY(-1px); // 轻微上移
        }
      }
    }

    // 汉堡菜单按钮（移动端）
    .hamburger-menu {
      display: none; // 桌面端隐藏
      flex-direction: column;
      justify-content: center;
      width: 24px;
      height: 18px;
      cursor: pointer;
      z-index: 1001; // 比菜单面板层级高
      position: relative;

      // 汉堡菜单的三条线
      span {
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease; // 动画过渡
        position: absolute;
        left: 0;
        border-radius: 1px;
        
        // 三条线的位置
        &:nth-child(1) {
          top: 2px;
        }
        
        &:nth-child(2) {
          top: 8px;
        }
        
        &:nth-child(3) {
          top: 14px;
        }
      }

      // 激活状态（X形状）
      &.active {
        span:nth-child(1) {
          top: 8px;
          transform: rotate(45deg); // 旋转45度
        }
        span:nth-child(2) {
          opacity: 0; // 中间线消失
        }
        span:nth-child(3) {
          top: 8px;
          transform: rotate(-45deg); // 旋转-45度
        }
      }
    }
  }

  // 移动端下拉菜单面板
  .mobile-menu {
    position: fixed;
    top: 60px; // 紧贴导航栏下方
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95); // 深色半透明背景
    backdrop-filter: blur(15px); // 强模糊效果
    transform: translateY(-100%); // 初始位置在上方隐藏
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease; // 过渡动画
    z-index: 999;

    // 打开状态
    &.open {
      transform: translateY(0); // 滑动到正常位置
      opacity: 1;
      visibility: visible;
    }

    // 移动端菜单项
    .mobile-menu-item {
      display: block;
      color: #fff;
      padding: 16px 20px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); // 分隔线
      cursor: pointer;
      transition: all 0.3s ease;

      // 悬停效果
      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffd700;
      }

      // 最后一项去除底边框
      &:last-child {
        border-bottom: none;
      }
    }
  }

  // ========== 响应式布局 ==========
  /* 平板设备 - 768px 及以下 */
  @media (max-width: 768px) {
    height: 50px; // 减小导航栏高度
    
    .display-barcode {
      padding: 0 16px; // 减小内边距
      
      .logo {
        width: 40px; // 缩小logo
        height: 32px;
      }

      .desktop-menu {
        display: none; // 隐藏桌面端菜单
      }

      .hamburger-menu {
        display: flex; // 显示汉堡菜单
        width: 22px;
        height: 16px;
      }
    }

    .mobile-menu {
      top: 50px; // 调整菜单位置

      .mobile-menu-item {
        padding: 14px 16px; // 调整内边距
        font-size: 15px;
      }
    }
  }

  /* 手机设备 - 480px 及以下 */
  @media (max-width: 480px) {
    height: 45px; // 进一步减小高度
    
    .display-barcode {
      padding: 0 12px;
      
      .logo {
        width: 35px;
        height: 28px;
      }

      .hamburger-menu {
        width: 20px;
        height: 15px;
      }
    }

    .mobile-menu {
      top: 45px;

      .mobile-menu-item {
        padding: 12px 12px;
        font-size: 14px;
      }
    }
  }

  /* 超小屏幕 - 360px 及以下 */
  @media (max-width: 360px) {
    .mobile-menu {
      .mobile-menu-item {
        padding: 10px 12px;
        font-size: 13px;
      }
    }
  }
}

// ========== 特殊情况适配 ==========
/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .scroll-down-indicator {
    height: 40px;
    
    .display-barcode {
      .logo {
        width: 30px;
        height: 24px;
      }

      .hamburger-menu {
        width: 18px;
        height: 14px;
      }
    }

    .mobile-menu {
      top: 40px;

      .mobile-menu-item {
        padding: 8px 16px;
        font-size: 13px;
      }
    }
  }

  .page-container {
    padding: 0 16px;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .scroll-down-indicator {
    .display-barcode {
      .logo {
        img {
          image-rendering: -webkit-optimize-contrast; // 图片渲染优化
          image-rendering: crisp-edges;
        }
      }
    }
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .scroll-down-indicator {
    background: rgba(0, 0, 0, 0.6); // 更深的背景色
  }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  .scroll-down-indicator {
    .display-barcode {
      .desktop-menu {
        .menu-item {
          transition: none; // 禁用过渡动画
          
          &:hover {
            transform: none; // 禁用变换
          }
        }
      }

      .hamburger-menu {
        span {
          transition: none;
        }
      }
    }

    .mobile-menu {
      transition: none;

      .mobile-menu-item {
        transition: none;
      }
    }
  }
}

/* 打印样式 */
@media print {
  .scroll-down-indicator {
    display: none; // 打印时隐藏导航
  }
}

// ========== 页面内容样式 ==========
/* 主标题样式 */
.main-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1); // 文字阴影

  @media (max-width: 768px) {
    font-size: 2.5rem; // 平板适配
  }

  @media (max-width: 480px) {
    font-size: 2rem; // 手机适配
  }
}

/* 副标题样式 */
.subtitle {
  font-size: 1.5rem;
  color: #7f8c8d;
  margin-bottom: 2rem;
  font-weight: 300; // 细体

  @media (max-width: 768px) {
    font-size: 1.2rem;
  }
}

/* 行动按钮样式 */
.cta-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); // 渊渐背景
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.1rem;
  border-radius: 50px; // 胶囊形状
  cursor: pointer;
  transition: all 0.3s ease; // 过渡效果
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); // 阴影

  // 悬停效果
  &:hover {
    transform: translateY(-2px); // 上浮
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); // 加深阴影
  }
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; // 不阻挡鼠标事件
  z-index: -1; // 置于背景层

  // 浮动圆形
  .floating-circle {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    opacity: 0.7; // 半透明
  }

  // 浮动正方形
  .floating-square {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    transform: rotate(45deg); // 旋转45度成菱形
    opacity: 0.7;
  }
}

/* 页面标题通用样式 */
.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2rem;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 2rem;
  }
}

// ========== 关于页面样式 ==========
/* 关于页面卡片网格 */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); // 响应式网格
  gap: 2rem; // 网格间距
  margin-top: 3rem;

  // 特性卡片样式
  .about-card {
    background: rgba(255, 255, 255, 0.1); // 半透明白色背景
    backdrop-filter: blur(10px); // 背景模糊
    border-radius: 15px; // 圆角
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2); // 边框
    transition: transform 0.3s ease; // 过渡动画

    // 悬停效果
    &:hover {
      transform: translateY(-5px); // 上浮
    }

    // 卡片图标
    .card-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    // 卡片标题
    h3 {
      color: #fff;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    // 卡片描述
    p {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6; // 行高
    }
  }
}

// ========== 服务页面样式 ==========
/* 服务项目容器 */
.services-container {
  max-width: 800px;
  margin: 0 auto;

  // 服务项目样式
  .service-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;

    // 悬停效果
    &:hover {
      transform: translateX(10px); // 右移
    }

    // 服务编号
    .service-number {
      font-size: 3rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.3); // 半透明白色
      margin-right: 2rem;
      min-width: 80px; // 最小宽度保证对齐
    }

    // 服务内容
    .service-content {
      flex: 1; // 占据剩余空间

      h3 {
        color: #fff;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
      }

      p {
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.6;
      }
    }

    // 移动端布局调整
    @media (max-width: 768px) {
      flex-direction: column; // 垂直布局
      text-align: center;

      .service-number {
        margin-right: 0;
        margin-bottom: 1rem;
      }
    }
  }
}

// ========== 联系页面样式 ==========
/* 联系信息网格 */
.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;

  // 联系项目样式
  .contact-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);

    // 联系图标
    .contact-icon {
      font-size: 2rem;
      margin-right: 1rem;
    }

    // 联系文本
    .contact-text {
      h4 {
        color: #fff;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }

      p {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    // 移动端布局调整
    @media (max-width: 768px) {
      flex-direction: column;
      text-align: center;

      .contact-icon {
        margin-right: 0;
        margin-bottom: 1rem;
      }
    }
  }
}

/* 社交链接样式 */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;

  // 社交链接按钮
  .social-link {
    display: inline-block;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);

    // 悬停效果
    &:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
    }
  }
}

// ========== AOS动画自定义样式 ==========
/* AOS 自定义动画 - 弹跳向上 */
[data-aos="bounce-up"] {
  transform: translate3d(0, 100px, 0); // 初始位置向下偏移
  
  &.aos-animate {
    transform: translate3d(0, 0, 0); // 动画到原位置
  }
}

/* 确保动画在全屏切换时正常工作 */
.aos-animate {
  transition-delay: 0s !important; // 移除延迟，立即播放动画
}
</style>